import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native'

import NavBar from '../../../../../components/PublicHeader';


export default class visibletime extends Component {
  constructor(props) {
    super(props)
    this.state = {
      params: '',
      showBusiness: null,
      default: false,
      business: this.props.navigation.state.params.business,
      list: [
        {
          title: '全部',
          showBusiness: 0,
          flag: false
        },
        {
          title: '最近半年',
          showBusiness: 2,
          flag: false
        },
        {
          title: '最近一个月',
          showBusiness: 3,
          flag: false
        },
      ],
    }
  }

  componentDidMount = () => {


  }
  // 点击的每一个 
  onClicks(item, index) {
    this.setState({
      showBusiness: item.showBusiness,
      title: item.title,
      default: true
    })
    var list = this.state.list
    list.map((item, _index) => {
      this.setState({ item_flag: item.flag = false })
      if (_index == index) {
        this.setState({ flag: item.flag = !item.flag })
      }
    })
  }
  // 确定按钮
  submit() {
    this.state.list.map(item => {
      if (item.flag) {
        // 传数据给父页面
        this.props.navigation.state.params.callBack(item)
        this.props.navigation.state.params.postNotAllowedSocials(this.state.showBusiness)
        this.props.navigation.state.params.getNotAllowede()
        this.props.navigation.goBack()
      }
    })
  }
  render() {
    return (

      <View style={styles.warper}>
        {/* 顶部导航 */}
        <View style={styles.tops}>
          <TouchableOpacity onPress={() => {
            this.props.navigation.goBack()
          }}>
            <Text style={styles.tops_left}>取消</Text>
          </TouchableOpacity>
          <Text style={styles.tops_center}>谁可以看</Text>
          <TouchableOpacity onPress={() => {
            this.submit()
          }}>
            <Text style={styles.right_text}>确定</Text>
          </TouchableOpacity>
        </View>
        {/* 选择时间 */}
        <ScrollView>
          {
            this.state.list.map((item, index) => {
              return (
                <TouchableOpacity onPress={() => {
                  this.onClicks(item, index)
                }}
                  key={index} style={styles.listBox}>
                  <View style={styles.list}>
                    <Text style={styles.text}>{item.title}</Text>
                    {
                      this.state.default ?
                        <Image source={
                          this.state.list[index].flag ?
                            require('../../../../../assets/images/iconResources/hook.png') :
                            null} /> :
                        <Image source={this.state.business == item.showBusiness ?
                          require('../../../../../assets/images/iconResources/hook.png') :
                          null} />
                    }
                  </View>
                </TouchableOpacity>
              )
            })
          }
        </ScrollView>
      </View >
    )
  }
}
const styles = StyleSheet.create({
  warper: {
    flex: 1,
    backgroundColor: '#fff'
  },
  tops: {
    display: "flex",
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 30,
    padding: 15
  },
  tops_left: {
    fontSize: 15
  },
  tops_center: {
    fontSize: 19
  },
  right_text: {
    alignSelf: 'center'
  },
  listBox: {
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "#fff"
  },
  list: {
    height: 55,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: "center",
    borderBottomColor: '#f2f2f2',
    borderBottomWidth: 1
  },
  text: {
    color: "#333",
    fontSize: 16
  },
  list_img: {
    display: 'none'
  },
  list_img2: {

  },
})